import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Box, Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from "react-router-dom";
import { callGetNewsApi } from 'utils/networking';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
    title: {
        fontSize: "56px",
        color: "white",
        textAlign: "center",
        textTransform: "uppercase",
        padding: "50px 0"
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "40px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#7E53F9",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            lineHeight: "85px",
        },
    },
    typography2: {
        color: "#7E53F9",
        lineHeight: "20px",
        paddingLeft: "20px",
        fontSize: "12px",
        [theme.breakpoints.up('md')]: {
            textAlign: "center",
            marginTop: "15px",
            paddingLeft: "0",
            fontSize: "16px",
        },
    },
    typography3: {
        color: "#fff",
        fontSize: "14px",
        lineHeight: "14px",
        margin: "10px 0",
        textAlign: "left",
        width: "90%",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
            lineHeight: "24px",
            width: "100%",
        },
    },
    typography4: {
        color: "#fff",
        fontSize: "12px",
        lineHeight: "14px",
        textAlign: "left",
        width: "100%",
    },
    main: {
        padding: "0 10px",
        [theme.breakpoints.up('md')]: {
            padding: "0 8%",
        },
    },
    button: {
        color: "#fff",
        fontSize: "10px",
        padding: "8px 2px",
        border: "1px solid #fff",
        lineHeight: "18px",
        cursor: "pointer",
        [theme.breakpoints.up('md')]: {
            padding: "8px 35px",
            display: "block",
        },
        [theme.breakpoints.up('lg')]: {
            padding: "8px 40px",
        },
    },
    grid: {
        padding: "50px 10px ",
        justifyContent: "center",
        [theme.breakpoints.up('sm')]: {
            justifyContent: "space-between",
        },
        [theme.breakpoints.up('md')]: {
            padding: "8% 8%",
        },
    },
    gridItem: {
        background: "#333",
        marginTop: "20px",
        padding: "10px"
    },
    image: {
        height: "80px",
        width: "80px",
        [theme.breakpoints.up('sm')]: {
            height: "100px",
            width: "100px",
        },
        [theme.breakpoints.up('md')]: {
            height: "120px",
            width: "120px",
        },
        [theme.breakpoints.up('lg')]: {
            height: "150px",
            width: "150px",
        },
        background: "#999"
    },
    adImage: {
        marginTop: "30px",
        borderRadius: "8px",
        overflow: "hidden",
        height: "auto",
        "& span": {
            verticalAlign: "middle",
        },
        [theme.breakpoints.up('sm')]: {
            height: "300px",
        },
        [theme.breakpoints.up('md')]: {
            display: "block",
            height: "auto",
        },
    },
}));

const Banner = () => {

    const classes = useStyles();
    const [voteAdData, setVoteAdData] = useState([]);
    const [voteData, setVoteData] = useState([]);
    const dispatch = useDispatch()
    const history = useHistory();


    useEffect(() => {
        getServerProps()
        getServerAdProps()
    }, [])

    const getServerAdProps = async () => {
        callGetNewsApi(`vote/categories_ad`, dispatch, (data) => {
            setVoteAdData(data);
        })
    }

    const getServerProps = async () => {
        callGetNewsApi(`vote/categories`, dispatch, (data) => {
            console.log(data, "888");
            setVoteData(data);
        })
    }

    const formatData = (data) => {
        let datas = data || ""

        let handleData = datas.split("-")

        return (handleData[2] <= 10 ? handleData[2][1] : handleData[2]) + "/" +( handleData[1] <= 10 ? handleData[1][1] : handleData[1]) + "/" + handleData[0]
    }

    const moveDetailPage = (item) => {
        history.push(`voting/${item.id}}`,{...item,ad:voteAdData});
        
    }
    return (
        <div className={classes.root}>
            <div className={classes.title}>
                categories
            </div>
            <div className={classes.main}>
                {
                    voteData?.map((item, index) => <Grid container className={classes.gridItem} key={index}>
                        <Grid item xs={3} sm={2}>
                            <div className={classes.image} >
                                <Image
                                    src={item.image}
                                    alt={item.image}
                                    srcSet={item.image}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                />
                            </div>
                        </Grid>
                        <Grid item xs={5} sm={6} md={6} container alignContent='center'>
                            <Typography className={clsx(classes.typography, classes.typography3)}>{item.title}</Typography>
                            <Typography className={clsx(classes.typography, classes.typography4)}>VOTES: {item.vote_num}</Typography>
                        </Grid>
                        <Grid item xs={2} sm={2} md={2} container alignContent='center'>
                            <Typography className={clsx(classes.typography, classes.typography4)}>END DATE: </Typography>
                            <Typography className={clsx(classes.typography, classes.typography4)}>{formatData(item.end_date)}</Typography>
                        </Grid>

                        <Grid item container justifyContent='center' alignItems='center' xs={2} md={2}>
                            <div className={clsx(classes.typography, classes.button)} onClick={() => moveDetailPage(item)}>Vote now</div>
                        </Grid>
                    </Grid>)
                }
            </div >

            <Grid container className={classes.grid}>
                {
                    voteAdData?.filter((ele, i) => i < 3).map((item, index) => (
                        <Grid item xs={8} sm={3} className={classes.adImage} key={index}>
                            <a href={item.link}>
                                <Image
                                    src={item.image_url}
                                    alt={item.image_url}
                                    srcSet={item.image_url}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                />
                            </a>
                        </Grid>))
                }
            </Grid>
        </div >
    )
}


Banner.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Banner
